/**
 * @description 图表组件
 * @author 大肘子
 */

import React, { FC, PureComponent } from "react";
import { PieChart, Pie, Legend, Cell, Tooltip, ResponsiveContainer } from "recharts";

import { QuestionRadioStatType } from "./type";

const StatComponent: FC<{ list: QuestionRadioStatType[] }> = (props) => {
  const { list } = props;
  const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];

  return (
    <ResponsiveContainer width="100%" height="100%">
      <PieChart width={400} height={400}>
        <Pie dataKey="count" isAnimationActive={true} data={list} cx="50%" cy="50%" outerRadius={80} label>
          {list.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        <Tooltip />
      </PieChart>
    </ResponsiveContainer>
  );
};

export default StatComponent;
